<template>
  <!-- 交易流水 -->
  <div class="app-page">
    <el-tabs
      ref="transactionsTab"
      v-model="activeTabName"
      type="card"
    >
      <el-tab-pane v-if="$hasTabPermission(90101)" label="线上收款交易流水" name="cashTransactions">
        <cashTransactions v-if="activeTabName === 'cashTransactions'" ref="cashTransactions" />
      </el-tab-pane>
      <el-tab-pane v-if="$hasTabPermission(90102)" label="线上退款交易流水" name="refundTransactions">
        <refundTransactions v-if="activeTabName === 'refundTransactions'" ref="refundTransactions" />
      </el-tab-pane>
      <el-tab-pane v-if="$hasTabPermission(90103)" label="二次支付交易流水" name="secondPayTransactions">
        <secondPayTransactions v-if="activeTabName === 'secondPayTransactions'" ref="secondPayTransactions" />
      </el-tab-pane>
    </el-tabs>
  </div>
</template>

<script>
  import cashTransactions from './components/cashTransactions'
  import refundTransactions from './components/refundTransactions'
  import secondPayTransactions from './components/secondPayTransactions'
  export default {
    name: 'transactions',
    components: {
      cashTransactions, refundTransactions, secondPayTransactions
    },
    data() {
      return {
        activeTabName: 'cashTransactions'
      }
    },
    mounted() {
      this.activeTabName = this.$refs.transactionsTab.panes[0].name
    }
  }
</script>
<style lang="scss" scoped>
  .app-page {
    padding: 0;
    margin: 0;
    /deep/.el-tabs__header {
      margin: 0 0 10px;
    }
  }
</style>
